<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>成员信息表</title>
    <!--1.引入bootstrap样式框架；-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

    <!--2.引入angularJS分页样式的框架；-->
    <link rel="stylesheet" href="angularjs/pagination.css">

    <!--3.引入bootstrap中的Jquery框架；-->
    <script src="bootstrap/js/jquery.min.js"></script>
    <!--4.引入bootstrap中的Js框架；-->
    <script src="bootstrap/js/bootstrap.min.js"></script>

    <!--5.引入AngularJS的JS框架-->
    <script src="angularjs/angular.min.js"></script>

    <!--6.引入AngularJS分布的JS框架-->
    <script src="angularjs/pagination.js"></script>
</head>
<body ng-app="cityApp" ng-controller="cityCtrl" ng-init="Like2()">
<div class="container">
    <div class="panel panel-primary">
        <div class="panel-heading text-center">
            <h1>成员信息表</h1>
        </div>
        <div class="panel-body">
            <form class="form-inline">
                <input type="text" class="form-control" style="width: 30%" ng-model="like1">
                <a type="button" class="btn btn-success" ng-click="Like2()">搜索</a>
            </form>

            <table class="table table-hover table-bordered table-striped table-condensed text-center">
                <tr>
                    <td>序号</td>
                    <td>姓名</td>
                    <td>年龄</td>
                    <td>性别</td>
                    <td>操作</td>
                </tr>
                <tr ng-repeat="x in list">
                    <td>{{$index+1}}</td>
                    <td>{{x.name}}</td>
                    <td>{{x.age}}</td>
                    <td>{{x.sex}}</td>
                    <td>
                        <a class="btn btn-success" ng-click="open(x)">修改</a>
                        <a class="btn btn-danger" ng-click="delete(x.id)">删除</a>
                    </td>
                </tr>
                <tr>
                    <td colspan="5">
                        <!--分页标签-->
                        <tm-pagination conf="paginationConf"></tm-pagination>
                    </td>
                </tr>
            </table>
        </div>
        <div class="panel-footer text-right">
            &copy;华为开发
        </div>
    </div>
</div>


<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header text-center" style="background: wheat">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h2>{{msg}}</h2>
            </div>
            <div class="modal-body" style="background: wheat">
                <table class="table table-striped table-hover table-bordered table-condensed">
                    <tr>
                        <td class="col-lg-5 text-right">姓名</td>
                        <td><input type="text" ng-model="name"></td>
                    </tr>
                    <tr>
                        <td class="col-lg-5 text-right">年龄</td>
                        <td><input type="text" ng-model="age"></td>
                    </tr>
                    <tr>
                        <td class="col-lg-5 text-right">性别</td>
                        <td>
                            <input type="text" ng-model="sex">
                            <input type="hidden" ng-model="id">
                        </td>
                    </tr>
                </table>
                <div class="modal-footer">
                    <button type="button" ng-click="update()" class="btn btn-success">
                        提交修改
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

</body>
<script>

    var app = angular.module('cityApp', ['pagination']);    //定义一个模块； cityApp
    app.controller("cityCtrl", function ($scope, $http) {    //定义一个控制器； cityCtrl  ,  $http 调用接口！  http://localhost:8080/citys/list
        // 分页配置如下：
        $scope.paginationConf = {
            currentPage: 1,   //当前页；
            itemsPerPage: 5, //每页5条;
            totalItems: 100,  //共计多少条数据；
            perPageOptions: [2, 5, 10, 20],
            onChange: function () {
                //每次改变页面大小，自动 调用；
                $scope.Like($scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage);   // index, size
            }
        };

        $scope.getAllByPages = function (index, size) {

            $http.get("/user/showAll?pageNum=" + index + "&pageSize=" + size).success(function (data) {
                $scope.list = data.rows;      // 把查询到的json中的rows赋值给list;
                $scope.paginationConf.totalItems = data.total;
            });
        };

        //模糊查询
        $scope.Like = function (index, size) {
            $http.get("/user/like?like1=" + $scope.like1 + "&pageNum=" + index + "&pageSize=" + size).success(function (data) {
                $scope.list = data.rows;      // 把查询到的json中的rows赋值给list;
                $scope.paginationConf.totalItems = data.total;
            });
        }
        $scope.Like2 = function () {
            $scope.Like($scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage);
        }


        //    删除成员
        $scope.delete = function (id) {
            $http.get("/user/delete?id=" + id).success(function (data) {
                $scope.list = data.rows;      // 把查询到的json中的rows赋值给list;
                $scope.paginationConf.totalItems = data.total;
            });
        };

        //打开修改模态框
        $scope.open = function (x) {
            $scope.msg = "修改成员信息"
            $scope.name = x.name;
            $scope.age = x.age;
            $scope.sex = x.sex;
            $scope.id = x.id;
            $("#myModal").modal("show");
        }
        $scope.update = function () {
            $http.post("/user/update?name=" + $scope.name + "&age=" + $scope.age + "&sex=" + $scope.sex + "&id=" + $scope.id).success(function (data) {
                $scope.list = data.rows;      // 把查询到的json中的rows赋值给list;
                $scope.paginationConf.totalItems = data.total;
            });
            $("#myModal").modal("hide");
            alert("修改成功")
        }
    });

</script>
</html>